Websydian v6.1 online documentationOnline documentation - WebsydianExpress v3.5

ExtWebEditDialog Sample Description

Overview

This describes a simple example of how you can use functions that inherit from ExtWebEditDialog in your applications.

You will do this whenever you maintain the records of an entity.

An implementation of the sample can be found in the EXPRESSTEST model.

A running version of the sample can be found in the delivered sample site.

In addition to the Album sample, a very simple sample showing maintenance of the Country entity is also available in the sample site. This will not be described as it is covered by the Album sample.

In the sample site, two different menu items triggers the Album maintenance sample. It is the exact same sample that is being shown, but the templates used by the two samples differs somewhat.

Sample content

The sample shows an implementation of an entity inheriting from ExtWebEditDialog.

Implementing the sample

The maintenance functionality is implemented for the AlbumCollection.Albums entity.

Defining inheritance for the entity

To get the edit suite functions specify the following inheritance:

Source Object Verb Target Object
AlbumCollection.Albums is a ENT WSYEXTJS/ExtWebEditDialog

This provides a suite of programs that handles the maintenance of the album records.

Defining the grid page content

Whenever you define a grid, you must define the order you want to show the records in.

For an edit suite, this is done by replacing the Fetch view of the entity on the grid page function:

Source Object Verb Target Object
AlbumCollection.Albums.ExtWebEditSuite.GridPage replaces VW

...by VW

AlbumCollection.Albums.Fetch

AlbumCollection.Albums.FetchByArtistAlbum

By replacing the view, you define that the records should be shown in the order defined by the view. If you do not also replace the BlockFetch function, the BlockFetchWrapper function scoped by the view is used to actually retrieve the data for the grid.

The Albums entity is known by a unique UUID, which it isn't relevant to show on the grid page. To avoid showing the UUID - define the following triples:

Source Object Verb Target Object
AlbumCollection.Albums.ExtWebEditSuite.GridPage local FLD

...for VAR

AlbumCollection.Fields.UUIDAlbum

OmitGridFields

AlbumCollection.Albums.ExtWebEditSuite.GridPage

 

local FLD

...for VAR

AlbumCollection.Fields.UUIDAlbum

OmitDetailsFields

The UUID is part of the key of the FetchByArtistAlbum view - so it will also be an input field on the LoadData event scoped by the grid page. This field should be hidden as the user shouldn't be able to specify an UUID when positioning the grid:

Source Object Verb Target Object
AlbumCollection.Albums.ExtWebEditSuite.GridPage.LoadData local FLD

...for VAR

AlbumCollection.Fields.UUIDAlbum

Hidden

In addition to this, the AlbumReview field is a very long text field, which should not be shown in the grid:

Source Object Verb Target Object
AlbumCollection.Albums.ExtWebEditSuite.GridPage local FLD

...for VAR

AlbumCollection.Fields.AlbumReview

OmitGridFields

Fields and field types

The fields AlbumArtist and AlbumName are standard text fields without any special handling These are just shown in the detail and grid regions as texts.

The field AlbumReview scopes a source code wsyfieldtype with the literal value "wsyhtmleditor". This means that the field is shown inside an html editor in the update and insert pages and shown as the formatted text on the view page.

The field AlbumArtURL is also just a text field. Based on the Plex definitions, this field would just be shown as a text showing the URL. However, on the page, the image specified by the URL is shown instead. This is because the following change has been made to the js template used by the grid page (WAALBGRD.js):

 

// !wsyd.editpoint.begin - wsyInitGridFields
    WAALBGRD.wsyGridFields.WAhmA.renderer = function(value) {
        return "<img src='" + WAALBGRD.fieldvalues.WSRESURL.value + "albumart/" + value + "' />";
    };
// !wsyd.editpoint.end - wsyInitGridFields

The change has been placed inside an edit point, which means that even though the template generator is run again to create a new version of the template, the change will still be present in the new version.

The AlbumFormat field is a status field with a number of static values (specified as values for the field). These values are presented in a drop down box.

The field AlbumReleaseYear is a numeric field without decimals. No special handling has been introduced for the field.

The field AlbumGenre shows a way to add an event to a field. In this case, a selector function should be available to select the genre.

The first thing to do when you want this functionality is to specify "wsytriggerfield" in the wsyfieldtype source code scoped by the field.

Then you must define which EventHandler you want to associate with the field - by creating this triple:

Source Object Verb Target Object
AlbumCollection.Fields.AlbumGenre special type NME

...output FNC

wsytriggerevent

AlbumCollection.Genres.ExtWebEditSuite._ServiceFunctions.SelectGenre

This specifies that the SelectGenre function must be used as the trigger event for the field. This function must be an EventHandler.

The final step is to make the event available for the insert and update page:

Source Object Verb Target Object
AlbumCollection.Albums.ExtWebEditSuite.InsertPage comprises FNC AlbumCollection.Genres.ExtWebEditSuite._ServiceFunctions.SelectGenre
AlbumCollection.Albums.ExtWebEditSuite.UpdatePage comprises FNC AlbumCollection.Genres.ExtWebEditSuite._ServiceFunctions.SelectGenre

Note that the selector just provides a set of predefined values, you can select for the format, you also have the option to just enter a format - it is not validated whether the format exists - in this way, the field is a mixture of a normal text field and a field populated using a drop down box.

Generate and build

Generate and build AlbumCollection.Albums.ExtWebEditSuite and all scoped functions.

Run all template generators.

Deploy the generated files to the template folder of the site you want to test in.

Deploy the generated program objects to your WebsydianExpress installation.

Define a business process content loader with the implementation name of the AlbumCollection.Albums.ExtWebEditSuite function.

Add this content loader to the site structure.